import { useDispatch, useSelector } from "react-redux";

import {addCountAsync} from '../store/actions/index'

export default function Hello() {
  const count = useSelector((state: any) => state.count);
  const dispatch: any = useDispatch();

  function handleAdd2() {
    // 实现隔上一秒，再 + 1
    // setTimeout(() => {
    //   dispatch({ type: "counter/increment" });
    // }, 1000);

    // 上面代码，没有任何问题，异步处理好之后，再调用 dispatch 来修改仓库。
    // 但我们期望能够将异步的代码与redux的dispatch有关联。期望能有个 异步动作的概念。
    // 将 action 设计成 函数形式。

    dispatch(addCountAsync);
  }

  return (
    <div>
      <h4>Hello</h4>
      <p>count: {count}</p>
      <button onClick={() => dispatch({ type: "counter/increment" })}>
        Add
      </button>

      <button onClick={handleAdd2}>Add -2</button>
    </div>
  );
}
